import { Canvas } from '@react-three/fiber'
import { OrbitControls, PerspectiveCamera, Environment, Stars } from '@react-three/drei'
import { Suspense, memo } from 'react'
import type { FC, ReactNode } from 'react'

interface Scene3DProps {
  children?: ReactNode
}

const Scene3D: FC<Scene3DProps> = memo(({ children }) => {
  return (
    <div style={{ 
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      overflow: 'hidden'
    }}>
      <Canvas
        camera={{ position: [30, 30, 30], fov: 50 }}
        style={{ background: '#000000' }}
        gl={{ 
          antialias: true,
          powerPreference: "high-performance",
          alpha: false,
          depth: true
        }}
        dpr={[1, 2]}
        shadows
        eventSource={document.documentElement}
        eventPrefix="client"
      >
        <Suspense fallback={null}>
          <PerspectiveCamera makeDefault position={[30, 30, 30]} />
          <OrbitControls 
            enableDamping 
            dampingFactor={0.05}
            minDistance={20}
            maxDistance={60}
            maxPolarAngle={Math.PI / 2.1}
            makeDefault
            domElement={document.documentElement}
          />
          <Environment
            preset="night"
            background
            blur={0.8}
          />
          <Stars 
            radius={200}
            depth={100}
            count={5000}
            factor={4}
            saturation={0}
            fade
            speed={1}
          />
          {/* 环境光 - 提供基础照明 */}
          <ambientLight intensity={0.1} />
          
          {/* 主方向光 - 模拟太阳光 */}
          <directionalLight
            position={[20, 40, 10]}
            intensity={0.8}
            castShadow
            shadow-mapSize={[2048, 2048]}
            shadow-camera-left={-40}
            shadow-camera-right={40}
            shadow-camera-top={40}
            shadow-camera-bottom={-40}
            shadow-bias={-0.0001}
          />
          
          {/* 半球光 - 提供更自然的环境光 */}
          <hemisphereLight
            intensity={0.2}
            groundColor="#000000"
            color="#ffffff"
          />
          <fog attach="fog" args={['#000000', 60, 180]} />
          {children}
        </Suspense>
      </Canvas>
    </div>
  )
})

Scene3D.displayName = 'Scene3D'

export default Scene3D 